<template>
    <div class="ml-16px mr-16px mb-16px pt-26px content-container">
        <div class="pl-26px pr-26px pb-26px words-container">
            <div class="flex items-center pl-36px pt-26px -mt-26px -ml-26px text-14px font-bold level-2-title">
                自定义组合
            </div>
            <el-row :gutter="16" class="mt-16px">
                <el-col :span="8">
                    <FrontKeyword :rule-form="ruleForm" />
                </el-col>
                <el-col :span="6">
                    <MainKeyword :rule-form="ruleForm" />
                </el-col>
                <el-col :span="10">
                    <BackKeyword :rule-form="ruleForm" />
                </el-col>
            </el-row>
            <div class="flex justify-end mt-16px">
                <el-button type="primary" plain @click="state.isDialogVisible = true">问题预览</el-button>
                <el-button :loading="state.loading" type="primary" @click="handleConfirm">确认提交</el-button>
            </div>
        </div>
        <QuestionPreview v-if="state.isDialogVisible" v-model:isDialogVisible="state.isDialogVisible"
            :rule-form="ruleForm" @closeDialog="state.isDialogVisible = false" />
    </div>
</template>

<script setup lang="ts">
import FrontKeyword from './FrontKeyword.vue'
import MainKeyword from './MainKeyword.vue'
import BackKeyword from './BackKeyword.vue'
import QuestionPreview from './QuestionPreview.vue'
import { confirmMessageBox } from '@/utils/elMessageBox'
import { CircleCloseFilled, SuccessFilled } from '@element-plus/icons-vue'
import { addProjectKeywordApi } from '@/api/geoBasic'
import { getFreedomWordID, checkGeo,checkMainWord } from '@/utils/index'
import { useUserStore } from '@/store/modules/user'

const props = defineProps<{
    ruleForm: any;
}>()

const state = reactive({
    isDialogVisible: false,
    loading: false
})

const userStore = useUserStore()

async function handleConfirm() {
    try {
        const { api } = checkGeo(userStore.geo)
        const res = await addProjectKeywordApi(api, {
            ID: props.ruleForm.id,
            Keyword: checkMainWord(props.ruleForm.mainWords),
            leftkeydata: props.ruleForm.frontWords,
            rightkeydata: props.ruleForm.backWords,
            CusKeyword: props.ruleForm.cusKeyword,
            Freedoms: getFreedomWordID(props.ruleForm.freedomWords),
            DeleteKeyword: props.ruleForm.deleteWord.endsWith("/") ? props.ruleForm.deleteWord.slice(0, -1) : props.ruleForm.deleteWord,
            Type: props.ruleForm.combinationOptions
        })
        if (res.code === 200) {
            state.loading = false
            confirmMessageBox(SuccessFilled, res.message)
        }
    } catch (error: any) {
        if (error.response && error.response.status === 405) {
            confirmMessageBox(CircleCloseFilled, error.response.data.message)
            state.loading = false
        }
    }
}
</script>

<style scoped></style>